<template>
	<view class="home">
		<view class="home_title">
			<view class="home_title_left">
				<uni-icons type="search" size="20" color="#ccc" style="padding: 0 20rpx;"></uni-icons>
				请输入关键字
			</view>
			<view class="home_title_right">
				<image src="../../static/juan.png" mode="heightFix"></image>
			</view>
		</view>
		<view class="home_box">
			<view class="home_box_carousel">
				<swiper class="swiper" :interval='2000' autoplay>
					<swiper-item v-for="(item,index) in res.banner" :key="index">
						<image :src="item.thumb" mode=""></image>
					</swiper-item>
				</swiper>
			</view>

			<view class="home_box_Coupons">
				<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="0">
					<view class="scroll-view-item_H">
						<view class="jiazhi">
							<p>199.00</p>
							<span>元</span>
						</view>
						<view class="manjian">
							满2000元，减199元
						</view>
						<view class="lijishiyong">
							立即使用
						</view>
					</view>
					<view class="scroll-view-item_H">
						<view class="jiazhi">
							<p>199.00</p>
							<span>元</span>
						</view>
						<view class="manjian">
							满2000元，减199元
						</view>
						<view class="lijishiyong">
							立即使用
						</view>
					</view>
					<view class="scroll-view-item_H">
						<view class="jiazhi">
							<p>199.00</p>
							<span>元</span>
						</view>
						<view class="manjian">
							满2000元，减199元
						</view>
						<view class="lijishiyong">
							立即使用
						</view>
					</view>
					<view class="scroll-view-item_H">
						<view class="jiazhi">
							<p>199.00</p>
							<span>元</span>
						</view>
						<view class="manjian">
							满2000元，减199元
						</view>
						<view class="lijishiyong">
							立即使用
						</view>
					</view>
					<view class="scroll-view-item_H">
						<view class="jiazhi">
							<p>199.00</p>
							<span>元</span>
						</view>
						<view class="manjian">
							满2000元，减199元
						</view>
						<view class="lijishiyong">
							立即使用
						</view>
					</view>
					<view class="scroll-view-item_H">
						<view class="jiazhi">
							<p>199.00</p>
							<span>元</span>
						</view>
						<view class="manjian">
							满2000元，减199元
						</view>
						<view class="lijishiyong">
							立即使用
						</view>
					</view>
				</scroll-view>
			</view>

			<view class="home_box_fenlei">
				<uv-grid :border="false" col='5'>
					<uv-grid-item v-for="(item,index) in res.menu" :key="index" style="margin: 20rpx 0;"
						@click="toFun(item.link,index)">
						<!-- <uv-icon :customStyle="{paddingTop:20+'rpx'}" :name="item.name" :size="22"></uv-icon> -->
						<image :src="item.thumb"
							style="width: 100rpx;background-color: #fff;border-radius: 100rpx;height: 100rpx;" mode="">
						</image>
						<text class="grid-text"
							style="font-size: 26rpx;margin: 10rpx 0;color: #fff;">{{item.bannername}}</text>
					</uv-grid-item>
				</uv-grid>
			</view>


			<view class="home_box_image">
				<view class="home_box_image_item">
					<image src="@/static/home/63cbe4b8088a28a129923b65f412fcb2.png" mode=""></image>
				</view>
				<view class="home_box_image_item1">
					<image src="@/static/home/50e077b0a5df1c48dcd9be4e47b03324.png" mode=""></image>
					<image src="@/static/home/a44ee2a893e6b296efcd167fe0dc246d.png" mode=""></image>
				</view>
			</view>

			<view class="home_box_ExplosiveProduct" @click="showinteraction('暂未开放')">
				<image src="@/static/home/70845d2cb5fc68882b27ad3de9a100e0.png" mode="widthFix"></image>
				<view class="home_box_ExplosiveProduct_goods">
					<view class="home_box_ExplosiveProduct_goods_item">
						<view class="home_box_ExplosiveProduct_goods_item_image">
							<image src="@/static/home/35d16098eef2adfa47f67dcf7018da88.jpg" mode=""></image>
						</view>
						<view class="home_box_ExplosiveProduct_goods_item_Information">
							<view class="home_box_ExplosiveProduct_goods_item_Information_title">
								<p>漫步者(EDIFIER) HECATE G2专业版 USB7.1声道 游戏耳机电竞耳麦头戴式电脑耳机麦克风吃鸡耳机带线控 黑色</p>
								<span>麦克风吃鸡耳机带线控</span>
							</view>
							<view class="home_box_ExplosiveProduct_goods_item_Information_Price">
								<view class="home_box_ExplosiveProduct_goods_item_Information_Price_left">
									<view class="home_box_ExplosiveProduct_goods_item_Information_Price_left_text">
										<p>￥299.00</p>
										<span>￥389.00</span>
									</view>
									<view class="home_box_ExplosiveProduct_goods_item_Information_Price_left_SoldOut">
										已售49
									</view>
								</view>
								<view class="home_box_ExplosiveProduct_goods_item_Information_Price_right">
									<view class="home_box_ExplosiveProduct_goods_item_Information_Price_right_button">
										立即购买
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="home_box_ExplosiveProduct_goods_item">
						<view class="home_box_ExplosiveProduct_goods_item_image">
							<image src="@/static/home/35d16098eef2adfa47f67dcf7018da88.jpg" mode=""></image>
						</view>
						<view class="home_box_ExplosiveProduct_goods_item_Information">
							<view class="home_box_ExplosiveProduct_goods_item_Information_title">
								<p>漫步者(EDIFIER) HECATE G2专业版 USB7.1声道 游戏耳机电竞耳麦头戴式电脑耳机麦克风吃鸡耳机带线控 黑色</p>
								<span>麦克风吃鸡耳机带线控</span>
							</view>
							<view class="home_box_ExplosiveProduct_goods_item_Information_Price">
								<view class="home_box_ExplosiveProduct_goods_item_Information_Price_left">
									<view class="home_box_ExplosiveProduct_goods_item_Information_Price_left_text">
										<p>￥299.00</p>
										<span>￥389.00</span>
									</view>
									<view class="home_box_ExplosiveProduct_goods_item_Information_Price_left_SoldOut">
										已售49
									</view>
								</view>
								<view class="home_box_ExplosiveProduct_goods_item_Information_Price_right">
									<view class="home_box_ExplosiveProduct_goods_item_Information_Price_right_button">
										立即购买
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="home_box_ExplosiveProduct_goods_item">
						<view class="home_box_ExplosiveProduct_goods_item_image">
							<image src="@/static/home/35d16098eef2adfa47f67dcf7018da88.jpg" mode=""></image>
						</view>
						<view class="home_box_ExplosiveProduct_goods_item_Information">
							<view class="home_box_ExplosiveProduct_goods_item_Information_title">
								<p>漫步者(EDIFIER) HECATE G2专业版 USB7.1声道 游戏耳机电竞耳麦头戴式电脑耳机麦克风吃鸡耳机带线控 黑色</p>
								<span>麦克风吃鸡耳机带线控</span>
							</view>
							<view class="home_box_ExplosiveProduct_goods_item_Information_Price">
								<view class="home_box_ExplosiveProduct_goods_item_Information_Price_left">
									<view class="home_box_ExplosiveProduct_goods_item_Information_Price_left_text">
										<p>￥299.00</p>
										<span>￥389.00</span>
									</view>
									<view class="home_box_ExplosiveProduct_goods_item_Information_Price_left_SoldOut">
										已售49
									</view>
								</view>
								<view class="home_box_ExplosiveProduct_goods_item_Information_Price_right">
									<view class="home_box_ExplosiveProduct_goods_item_Information_Price_right_button">
										立即购买
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="home_box_Recommendations">
				<image src="@/static/home/ce9cb18e6cd8dda71287195d97fc5c2d.png" mode="widthFix"></image>
				<view class="home_box_Recommendations_goods">
					<view class="home_box_Recommendations_goods_item" v-for="(item,index) in res.goods_list"
						:key="index" @click="toFun(`/pages/home/product_details/product_details?id=${item.id}`)">
						<view class="home_box_Recommendations_goods_item_image">
							<image :src="item.thumb" mode=""></image>
						</view>
						<view class="home_box_Recommendations_goods_item_box">
							<view class="home_box_Recommendations_goods_item_box_title">
								<!-- 华为笔记本电脑MateBook D 14 2022款 14英寸 11代酷睿 i5 16G+512G 锐炬显卡 轻薄本护眼全面屏 银 -->
								{{item.title}}
							</view>
							<span>轻薄本护眼全面屏</span>
							<view class="home_box_Recommendations_goods_item_box_Price">
								<p><!-- ￥4498.00 -->￥{{item.marketprice}}</p>
								<span>￥5300.00</span>
							</view>
							<span>已售56</span>
						</view>
						<image class="home_box_Recommendations_goods_item_goumai"
							src="@/static/home/4782356b4587dc4f4a218f2540a0bafc.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<app-login ref="login" @ShutDown='ShutDownFun'></app-login>
		<app-tab :current='0'></app-tab>
		<more-hot v-if="updateType"></more-hot>
	</view>
</template>

<script>
	import {
		api_index_get_index,
		acommsion_getappversion
	} from '@/api/home.js'

	export default {
		data() {
			return {
				res: '',
				equipment: '',
				value: '',
				openid: '',
				updateType: false
			};
		},
		onShow() {
			uni.hideTabBar();
			uni.getStorage({
				key: 'openid',
				success: (res) => {
					this.openid = res.data;
				}
			});
			if (process.env.UNI_PLATFORM === 'h5') {
				// 在H5环境中打开
				console.log('在H5环境中打开');
				this.equipment = 'H5'
			} else if (process.env.UNI_PLATFORM === 'app-plus') {
				// 在App环境中打开
				console.log('在App环境中打开');
				this.equipment = 'App'
				this.get_hot_url();
			}
			this.api_index_get_indexFun();

		},
		methods: {
			async get_hot_url() {
				console.log('-----------------------');
				var now_v = '';
				var hot_v = '';
				let _this = this;
				// 发起请求获取 hot_v
				let data = await acommsion_getappversion();
				console.log(data);
				hot_v = data.version;
				uni.getSystemInfo({
					success(e) {
						let a = e.appWgtVersion.split('.');
						a.forEach(item => {
							now_v = now_v += item;
						});
						if (hot_v !== now_v) {
							_this.updateType = true;
						} else {
							_this.updateType = false;
						}
					}
				});
			},



			ShutDownFun(e) {
				uni.getStorage({
					key: 'openid',
					success: (res) => {
						this.openid = res.data;
					}
				});
			},
			toFun(url, index = 0) {
				let _this = this;
				if (this.openid) {
					if (url) {
						if (index === 0) {
							uni.navigateTo({
								url
							})
						} else {
							uni.reLaunch({
								url
							})
						}

					} else {
						this.showinteraction('暂未开放');
					}
				} else {
					this.$refs.login.open();

				}
			},
			//提示
			showinteraction(title, icon = 'none') {
				uni.showToast({
					title,
					icon,
					duration: 2000,
					mask: false
				})
			},
			async api_index_get_indexFun() {
				let data = await api_index_get_index();
				this.res = data;
				console.log(data);
			},

			easyinputFocus(e) {
				console.log(e);
			},
			hhh() {
				this.$refs.login.open();
			}
		}
	}
</script>

<style lang="scss">
	.home {
		width: 100%;
		display: flex;
		height: 100vh;
		flex-direction: column;
		padding-top: var(--status-bar-height);

		.home_title {
			width: 100%;
			height: 88rpx;
			background-color: #EB3924;
			padding: 0 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.home_title_left {
				width: 90%;
				height: 68rpx;
				background-color: #FFFFFF;
				border-radius: 100rpx;
				display: flex;
				align-items: center;
				color: #ccc;
				font-size: 26rpx;
			}

			.home_title_right {
				height: 60%;

				image {
					height: 100%;
				}
			}
		}

		.home_box {
			width: 100%;
			flex: 1;
			overflow-y: auto;
			background-color: #FF9237;

			.home_box_carousel {
				width: 100%;
				height: 400rpx;
				// background-color: #fff;

				.swiper {
					width: 100%;
					height: 100%;

					image {
						width: 100%;
						height: 100%;
						display: block;
					}
				}
			}

			.home_box_Coupons {
				width: 96%;
				// height: 146px;
				margin: 20rpx auto;
				background-color: #EB3924;
				background-image: url("@/static/home/35730af2c38c4f13e83c3be53b463333.png");
				background-size: 100%;

				.scroll-view_H {
					white-space: nowrap;
					padding: 30rpx 20rpx;
					width: 100%;
					height: 100%;
					box-sizing: border-box;
					display: flex;
				}

				.scroll-view-item_H {
					display: inline-block;
					width: 228rpx;
					height: 230rpx;
					margin-right: 10rpx;
					text-align: center;
					background-color: #fff;
					border-radius: 10rpx;
					padding: 20rpx;
					box-sizing: border-box;

					.jiazhi {
						display: flex;
						width: 100%;
						align-items: center;
						color: #FF6000;

						align-items: baseline;

						p {
							font-size: 48rpx;
							font-weight: 700;

						}

						span {
							font-size: 20rpx;
						}
					}

					.manjian {
						width: 100%;
						padding: 0 20rpx;
						text-wrap: wrap;
						font-size: 20rpx;
						color: #FF6000;
						margin: 20rpx auto;
					}

					.lijishiyong {
						padding: 4rpx 20rpx;
						width: 140rpx;
						background-color: #FF6000;
						color: #fff;
						font-size: 26rpx;
						margin: 0 auto;
					}
				}
			}

			.home_box_fenlei {
				width: 100%;
				padding: 30rpx 0;
			}

			.home_box_image {
				width: 100%;
				height: 345rpx;
				display: flex;
				padding: 0 24rpx;
				justify-content: space-between;

				image {
					border-radius: 10rpx;
				}

				.home_box_image_item {
					image {
						width: 345rpx;
						height: 345rpx;
					}
				}

				.home_box_image_item1 {
					width: 345rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					image {
						width: 100%;
						height: 165rpx;
					}
				}

			}

			.home_box_ExplosiveProduct {
				width: 100%;
				display: flex;
				flex-direction: column;
				margin-top: 30rpx;
				align-items: center;
				padding: 0 20rpx;

				.home_box_ExplosiveProduct_goods {
					width: 100%;

					.home_box_ExplosiveProduct_goods_item {
						width: 100%;
						height: 280rpx;
						background-color: #fff;
						border-radius: 10rpx;
						margin-bottom: 20rpx;
						overflow: hidden;
						display: flex;

						.home_box_ExplosiveProduct_goods_item_image {
							width: 280rpx;
							height: 280rpx;

							image {
								width: 280rpx;
								height: 280rpx;
							}
						}

						.home_box_ExplosiveProduct_goods_item_Information {
							flex: 1;
							height: 100%;
							display: flex;
							flex-direction: column;
							justify-content: space-between;
							padding: 20rpx 0 10rpx 0;




							.home_box_ExplosiveProduct_goods_item_Information_title {
								p {
									width: 100%;
									height: 72rpx;
									font-size: 28rpx;
									color: #262626;
									display: -webkit-box;
									/* 使用WebKit的弹性盒模型 */
									-webkit-line-clamp: 2;
									/* 限制显示的文本行数 */
									-webkit-box-orient: vertical;
									/* 设置盒模型的方向为垂直 */
									overflow: hidden;
									/* 隐藏超出容器的部分 */
									text-overflow: ellipsis;
									/* 显示省略号 */
								}

								span {
									color: #999;
									font-size: 24rpx;
								}
							}

							.home_box_ExplosiveProduct_goods_item_Information_Price {
								width: 100%;
								height: 100rpx;
								display: flex;
								justify-content: space-between;
								align-items: center;
								padding: 0 20rpx 0 0;

								.home_box_ExplosiveProduct_goods_item_Information_Price_left {
									flex: 1;
									height: 100%;
									display: flex;
									flex-direction: column;
									// justify-content: space-around;
									padding: 20rpx 0;

									.home_box_ExplosiveProduct_goods_item_Information_Price_left_text {
										display: flex;
										align-items: baseline;
										color: #333;

										p {
											margin-right: 10rpx;
											color: #ff6000;
											font-size: 34rpx;
											font-weight: 500;
										}

										span {
											font-size: 20rpx;
											text-decoration: line-through;
											color: #999;
										}
									}

									.home_box_ExplosiveProduct_goods_item_Information_Price_left_SoldOut {
										width: 100%;
										height: 24rpx;
										font-size: 20rpx;
										margin-top: 8rpx;
										color: #999;

									}
								}

								.home_box_ExplosiveProduct_goods_item_Information_Price_right {
									width: 136rpx;
									height: 50rpx;
									font-size: 24rpx;
									text-align: center;
									background-color: #FF6000;
									line-height: 50rpx;
									color: #fff;
									border-radius: 100rpx;
								}
							}
						}
					}
				}
			}

			.home_box_Recommendations {
				width: 100%;
				padding: 0 10rpx 30rpx 14rpx;
				display: flex;
				flex-direction: column;
				align-items: center;

				.home_box_Recommendations_goods {
					width: 100%;
					display: flex;
					flex-wrap: wrap;

					.home_box_Recommendations_goods_item {
						width: 351rpx;
						height: 569rpx;
						background-color: #fff;
						display: flex;
						flex-direction: column;
						align-items: center;
						border-radius: 10rpx;
						overflow: hidden;
						margin: 7rpx;
						position: relative;

						.home_box_Recommendations_goods_item_goumai {
							position: absolute;
							width: 54rpx;
							height: 54rpx;
							bottom: 20rpx;
							right: 20rpx;
						}

						.home_box_Recommendations_goods_item_image {
							width: 100%;
							height: 351rpx;

							image {
								width: 100%;
								height: 100%;
							}
						}

						.home_box_Recommendations_goods_item_box {
							width: 100%;
							flex: 1;
							padding: 20rpx 16rpx;
							// background-color: red;

							.home_box_Recommendations_goods_item_box_title {
								width: 100%;
								font-size: 27rpx;
								text-wrap: nowrap;
								text-overflow: ellipsis;
								overflow: hidden;
								color: #262626;
								margin-bottom: 10rpx;
							}

							span {
								font-size: 24rpx;
								color: #999;
								padding-top: 10rpx;
							}

							.home_box_Recommendations_goods_item_box_Price {
								width: 100%;
								display: flex;
								align-items: baseline;

								p {
									margin-right: 20rpx;
									color: #F66000;
								}

								span {
									text-decoration: line-through;
								}
							}
						}
					}

				}
			}
		}

	}
</style>